<script setup lang="ts">
import Second from '~/components/cron/components/second.vue'
import Minute from '~/components/cron/components/minute.vue'
import Hour from '~/components/cron/components/hour.vue'
import Day from '~/components/cron/components/day.vue'
import Month from '~/components/cron/components/month.vue'
import Week from '~/components/cron/components/week.vue'
import Year from '~/components/cron/components/year.vue'

const emit = defineEmits(['ok', 'cancel'])

const activeKey = ref<'second' | 'minute' | 'hour' | 'day' | 'month' | 'week' | 'year'>('second')
const second = ref()
const minute = ref()
const hour = ref()
const day = ref()
const month = ref()
const week = ref()
const year = ref()
const formatStr = computed(() => {
  const secondStr = second?.value?.formatStr ?? '*'
  const minuteStr = minute?.value?.formatStr ?? '*'
  const hourStr = hour?.value?.formatStr ?? '*'
  const dayStr = day?.value?.formatStr ?? '*'
  const monthStr = month?.value?.formatStr ?? '*'
  const weekStr = week?.value?.formatStr ?? '?'
  const yearStr = year?.value?.formatStr ?? '*'
  return `${secondStr} ${minuteStr} ${hourStr} ${dayStr} ${monthStr} ${weekStr} ${yearStr}`
})
function handleOk() {
  emit('ok', unref(formatStr))
}
function handleCancel() {
  emit('cancel')
}
</script>

<template>
  <div class="mb-4">
    {{ formatStr }}
  </div>
  <a-tabs v-model:activeKey="activeKey" type="card">
    <a-tab-pane key="second" tab="秒" force-render>
      <Second ref="second" />
    </a-tab-pane>
    <a-tab-pane key="minute" tab="分" force-render>
      <Minute ref="minute" />
    </a-tab-pane>
    <a-tab-pane key="hour" tab="时" force-render>
      <Hour ref="hour" />
    </a-tab-pane>
    <a-tab-pane key="day" tab="日" force-render>
      <Day ref="day" />
    </a-tab-pane>
    <a-tab-pane key="month" tab="月" force-render>
      <Month ref="month" />
    </a-tab-pane>
    <a-tab-pane key="week" tab="周" force-render>
      <Week ref="week" />
    </a-tab-pane>
    <a-tab-pane key="year" tab="年" force-render>
      <Year ref="year" />
    </a-tab-pane>
  </a-tabs>
  <div class="text-right">
    <a-button type="primary" @click="handleOk">
      确认
    </a-button>
  </div>
</template>

<style scoped lang="less">

</style>
